<template>
    <div id="index">
        <el-container>

            <!--header-->
            <el-header>
                <Header></Header>
            </el-header>

            <!--middle-->
            <el-container class="middle">

                <!--mid-left-->
                <el-aside width="25%">
                    <el-card>
                        <div slot="header" class="clearfix" style="text-align: left">
                            <span>轮播图</span>
                            <el-link href="https://tuapi.eees.cc/" style="float: right; padding: 3px 0" type="text">随机图片API</el-link>
                        </div>
                        <Carousel></Carousel>
                    </el-card>
                </el-aside>

                <!--min-main-->
                <el-container>
                    <el-main>
                        <router-view></router-view>
                    </el-main>
                </el-container>

            </el-container>

            <!--footer-->
            <el-footer>
                <Footer></Footer>
            </el-footer>
        </el-container>
    </div>
</template>

<script>
    import Header from "../components/Header";
    import Footer from "../components/Footer";
    import Carousel from "../components/Carousel";

    export default {
        name: 'Index',
        components: {
            Carousel,
            Header,
            Footer,
        },
    }
</script>

<style>
    #index {
        text-align: center;
        background: url("../assets/background.jpg");
        /*background-image: url(https://qqlykm.cn/bing/bing.php);*/
        /*background-image:url(https://tuapi.eees.cc/api.php?category=fengjing&type=302);*/
        background-repeat:repeat;
        background-attachment:fixed;
        background-position:50% 50%;
    }

    .el-header, .el-footer {
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        line-height: 60px;
    }
    .el-aside {
        color: #333;
        margin-top: 20px;
    }

    .el-main {
        color: #333;
        text-align: center;
        line-height: 100px;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .middle {
        min-height: 800px;
        margin-top: 30px;
        padding: 20px 5%;
    }

</style>
